<template>
    <div id="blogDetail" :class="{isNight:isNight}">
        <div class="title">
            <h1>{{title}}</h1>
            <div class="bottom_msg">
              <div class="riqi">
                <span class="iconfont icon-riqi"></span>
                  {{createTime | time}}
              </div>
              <span class="iconfont icon-guankan"></span>{{views}}
            </div>
        </div>
        <div @click="goHome" class="gohome">
            <span class="iconfont icon-shouye"></span>首页 /
            <span>{{flag}}</span>
        </div>
        <div class="firstPicture">
            <img :src="firstPicture" />
        </div>    
        <!-- 文章内容 -->
        <div v-highlight >
          <mavon-editor 
            ref=md 
            v-highlight 
            v-html="content" 
            id="blogContent" 
            :class="{isNight:isNight}"></mavon-editor>
        </div>
        <!-- 最后修改时间，版权 -->
        <div class="info">
          <span class="lastTime">
            <span class="iconfont icon-riqi"></span>
            最后修改时间：{{updateTime | time}}</span>
          <span class="banquan">
            {{shareStatement ? '©允许转载' : '©版权所有，不允许转载'}}
          </span>
        </div>
        <div> 
          <el-tag v-for="item in tags" :key="item.id">
            {{item.name}}
          </el-tag>
        </div>
        <!-- 开启赞赏 -->
        <div class="appreciation" v-if="appreciation">
            <span class="appreciation_button" @click="appreciation_tag=!appreciation_tag">赞赏</span>
            <div class="appreciation_img" v-if="appreciation_tag">
                <img src="@/assets/img/zfb.jpg"></img>
                <img src="@/assets/img/wx.jpg"></img>
            </div>
        </div>
        <div class="commentabled" v-if="commentabled">
            <div class="comment_top">
                <div class="comment_num">评论({{nums}})</div>
            </div>
            <!-- 评论信息 -->
            <comment v-for="(item,index) in commentsFromServe" 
              :key="index"
              :mydata="item"
              class="comment"
              @getComments="getComments"
              @hideReply="hideReply"
              @showReply="showReply">
            </comment>
            <!-- 发表评论 -->
            <replay :id="id" @getComments="getComments" v-if="isShow"></replay>
        </div>  
    </div>
</template>

<script>
  //将markdown语法渲染成html语法
  import marked from 'marked'
  import hljs from 'highlight.js'
  //引入comment
  import comment from '@/components/front/home/comment.vue'
  import replay from '@/components/front/home/replay.vue'
  export default {
    components:{
      comment,
      replay
    },
    data(){
      return{
        isShow:true,//默认显示回复框
        isNight:false,
        id:'',//文章id
        content:'', //文章内容
        title:'', //文章名称
        createTime:'', //文章创建时间
        firstPicture:'', //文章首图
        tags:[], //文章标签
        appreciation:false, //开启赞赏
        appreciation_tag:false,
        commentabled:false, //开启评论
        flag:'', //原创/转载
        shareStatement:'', //转载声明
        typeId:'', //分类id
        views:0, //浏览量
        tags:[],
        updateTime:'',
        //评论表单
        form:{
            comment:'',
            name:'',
            email:''
        },
        //从服务端获取的评论信息
        commentsFromServe:{},
      }
    },
    created(){
      //判断当前时间
      let hour = new Date().getHours()
      if(hour > 6 && hour < 18){
        this.isNight = false
      }else{
        this.isNight = true
      }
      this.id = this.$route.query.id
      this.getArticalContent()
      //获取评论信息
      this.getComments()
    },
    mounted(){
      if(this.Cookies.get('viewId') != this.id){
        //像后端发送请求
        this.postViewId()
        this.Cookies.set('viewId', this.id)
      }
        //代码块高亮
        // let el = document.getElementById("blogContent")
        // console.log(el)
        // let blocks = el.querySelectorAll('pre code')
        // console.log('-')
        // console.log(blocks)
        // blocks.forEach((block) => {
        //     hljs.highlightBlock(block)
        // })
    },
    watch:{
      $route(){
        this.id = this.$route.query.id
        this.getArticalContent()        
      }
    },
    computed:{
      //计算属性不能在data中定义
      'nums':function(){
        let len = this.commentsFromServe.length
        let res = len 
        for(let i = 0; i < len; i++){
          res += this.commentsFromServe[i].replycomments.length
        }
        return res
      }
    },
    methods:{
      goHome(){
        this.$router.push('/home/blog?msg=hot')  
      },
      //发送浏览量
      async postViewId(){
        await this.$http.post("/blog/blogs/updateView/"+this.id)
      },
      async getArticalContent(){
        const {data:res} = await this.$http.get("/blog/blogs/details/" + this.id)
        this.content = marked(res.data.content)
        this.firstPicture = res.data.firstPicture
        this.title = res.data.title
        this.createTime = res.data.createTime
        this.appreciation = res.data.appreciation
        this.commentabled = res.data.commentabled
        this.views = res.data.views
        this.flag = res.data.flag
        this.updateTime = res.data.updateTime
        //获取标签
        this.tags = res.tags
      },
      //获取评论信息
      async getComments(){
        const {data:res} = await this.$http.get('/blog/comment/list/'+this.id)
        this.commentsFromServe = res.data
        //显示评论框
        this.isShow = true
      },
      //隐藏评论框
      hideReply(){
        this.isShow = false
      },
      showReply(){
        this.isShow = true
      }
    }
  }
</script>

<style scoped lang="less">
  .isNight{
      background-color: #292929 !important;
      color:#ccc;
  }
  #blogDetail{
    width:96%;
    height:100%;
    margin-left:2%;
    margin-right:2%;
    background-color: white;
  }
  .title{
    text-align:center;
    width:100%;
  }
  .riqi{
      display:inline-block;
      margin-right:20px;
  }
  .gohome{
      cursor:pointer;
  }
  .icon-shouye{
      margin-right:10px;
  }
//   markdown内容样式
  #blogContent{
    width:100%;
    box-shadow:0 0 0 #fff !important;
  } 
  #blogContent img{
      max-width:100px;
  }
  .firstPicture{
    width:80%;
    height:350px;
    padding: 10px;
    margin:30px auto;
  }
  .firstPicture img{
    width:100%;
    height:100%;
    display:inline-block;
  }
  .appreciation{
    width:100%;
    margin-top:30px;
    padding-top:20px;
    padding-bottom:20px;
    text-align:center;
  }
  .appreciation_button{
      background-color: red;
      color:white;
      border-radius:5px;
      padding:5px 16px;
      cursor:pointer;
  }
  .appreciation_img{
    margin-top:20px;
  }
  .appreciation img{
    display: inlinbe-block;
    width:160px;
    height:160px;
  }
  .appreciation img:first-child{
    margin-right:20px;
  }
  .commentabled{
    width:100%;
  }
  .comment_top{
    height:25px;
    width:100%;
    margin-bottom:8px;
  }
  .comment_top .comment_num{
      float:left
  }
  .comment_top .btn{
      float:right
  }
  //发表评论表单
  .comment{
    margin-top:16px;
  }
  //标签
  .info{
    padding:10px 8px 20px 8px;
    color:#ccc !important;
    overflow:hidden;
    font-size:12px;
  }
  .lastTime{
    float:left;
  }
  .banquan{
    float:right;
  }
  .el-tag{
    margin-left:10px !important;
  }
</style>